<template>
	<el-form class="departmentAddForm" ref="departmentInfo" :inline="true" :model="departmentInfo" label-width="80px">
		<el-form-item label="上级部门" style="width: 100%;">
			<el-cascader style="width: 185%;" ref="tree" v-model="parentCode" :options="departmentTree" :props="props" clearable @change="change">
				<template slot-scope="{ node, data }">
					<span>{{ node.label }} </span>
					<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
				</template>
			</el-cascader>
		</el-form-item>
		<el-form-item label="部门编号">
			<el-input style="width: 200%;" v-model="departmentInfo.departmentCode"></el-input>
		</el-form-item>
		<el-form-item label="部门名称">
			<el-input style="width: 200%;" v-model="departmentInfo.departmentName"></el-input>
		</el-form-item>
	</el-form>
</template>
<script>
	import request from '@/utils/request'
	export default {
		name: 'departmentEdit',
		props: ['departmentInfo'],
		data() {
			return {
				parentCode: [],
				//部门树
				departmentTree: [],
				props:{
					checkStrictly: true,
					value: "departmentCode",
					label: "departmentName",
					leaf: "leaf",
					multiple: false
				},

			}
		},
		watch: {
			departmentInfo: function(val) {
				this.getDepartmentTree();
				this.parentCode = [];
				this.parentCode.push(val.departmentParentCode)
			}
		},
		//页面初始化加载
		created() {
			this.getDepartmentTree();
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			change(a,b,c){
				var data = this.$refs.tree.getCheckedNodes()[0].data;
				this.departmentInfo.departmentParentCode = data.departmentCode;
			},
			getDepartmentTree(){
				request({
					url: '/system/department/queryTree',
					method: 'post',
					data: {}
				}).then(response => {
					debugger
					this.departmentTree = response.data
				})
			}
		}
	}
</script>
<style>
</style>
